<template>
  <div class="hello">
    <img src="../assets/img/top.png">
    <div class="box">
      <router-link to="/nav"><img src="../assets/img/button1.png"></router-link>
      <img src="../assets/img/button2.png">
      <img src="../assets/img/button3.png">
    </div>
    <img class="bottom" src="../assets/img/bottom.png">
  </div>
</template>
<script>
export default {
  name: 'home',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  img{
    width:100%;
    height:auto;
  }
  .box{
    width:80%;
    margin:auto;
    background-color: #f0f0f0;
  }
  .box img{
    float: left;
    width:30%;
    margin-left: 3%;
    margin-top: 10%;
  }
  .bottom{
    position: absolute;
    bottom:0;
    left:0;
  }
</style>
